<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>审批</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<link href="web/static/approval/css/editform.css" rel="stylesheet">
<link href="web/static/approval/css/fontello.css" rel="stylesheet">
<link href="web/static/approval/css/appvoralCSS.css" rel="stylesheet">
<link href="web/static/addone/artdialog/ui-dialog.css" rel="stylesheet">
<link href="web/static/addone/staffselector/selector.css" rel="stylesheet">
<link href="web/static/addone/tree/mytree.css" rel="stylesheet">
<link href="web/static/addone/staffselector/selector.css" rel="stylesheet">
<script type="text/javascript" src="web/static/js/jquery.form.js"></script>
<script type="text/javascript" src="web/static/addone/artdialog/dialog-min.js"></script>
<script type="text/javascript" src="web/static/addone/artdialog/dialog-plus.js"></script>
<script type="text/javascript" src="web/static/addone/tree/mytree.js"></script>
<script type="text/javascript" src="web/static/addone/staffselector/selector.js"></script>
<script type="text/javascript" src="web/static/js/approvalneedmethod.js"></script>
<style type="text/css">
html {
	font-size: 16px !important;
}
</style>
</head>
<body>
	<div class="container">
		<div class="approval-content">
			<p class="_showbutton icon-minus-circle">流程处理</p>
			<div class="approval-list">
				<div class="row">
					<div class="col-xs-12 approval-history">
						<span class="icon-check-empty icon-check">显示审批记录</span>
					</div>
				</div>
				<div class="row approval-table" style="display: block">
					<table>
						<thead>
							<tr>
								<td width="15%">时间</td>
								<td width="15%">节点名称</td>
								<td width="15%">操作者</td>
								<td width="15%">操作</td>
								<td width="40%">处理意见</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>2021-05-14 11:04:56</td>
								<td>水表录入</td>
								<td>周利斌</td>
								<td>同意</td>
								<td>中心</td>
							</tr>
							<tr>
								<td>2021-05-14 11:08:06</td>
								<td>水表录入审批</td>
								<td>周利斌</td>
								<td>同意</td>
								<td>测试。。。。</td>
							</tr>
							<tr>
								<td>2021-05-14 11:46:07</td>
								<td>终审节点</td>
								<td>周利斌</td>
								<td>驳回</td>
								<td>测试</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="row">
					<div class="col-xs-2">操作</div>
					<div class="col-xs-10 operation-box">
						<span> <label> <input type="radio" name="operation" value="32" />通过
						</label>
						</span> <span> <label> <input type="radio" name="operation" value="1" />驳回
						</label>
						</span> <span> <label> <input type="radio" name="operation" value="2" />转办
						</label>
						</span> <span> <label> <input type="radio" name="operation" value="4" />沟通
						</label>
						</span>
					</div>
				</div>
				<div class="row reject-box" style="display: none;">
					<div class="col-xs-2">驳回到</div>
					<div class="col-xs-10">
						<p>
							<select name="" id="reback">
								<option value="-1">请选择节点</option>
								<option value="register">水表录入</option>
								<option value="approval">水表录入审批</option>
								<option value="Process-task2" selected>终审节点</option>
							</select>
						</p>
					</div>
				</div>
				<div class="row turn-box" style="display: none;">
					<div class="col-xs-2">转办人员</div>
					<div class="col-xs-10">
						<p>
							<input id="reset" onclick="selector(this,1,'single')"
								class="turn-to-person" type="text" placeholder="请输入转办人员" /> <span
								style="color: red">*</span>
						</p>
					</div>
				</div>
				<div class="row communication-box" style="display: none;">
					<div class="col-xs-2">添加沟通</div>
					<div class="col-xs-10">
						<p>
							<input onclick="selector(this,1,'check')"
								class="turn-to-person communicate" type="text"
								placeholder="请输入沟通人员" />*
						</p>
					</div>
				</div>
				<div class="row processing-suggestions" id="remark">
					<div class="col-xs-2 r-opinion">处理意见</div>
					<div class="col-xs-10" style="background-color: #ffffff">
						<p>
							<textarea name="" id="context" maxlength="500"
								style="width: calc(100% - 84px)" rows="3"></textarea>
							<span class="submit-opinion submitOk" data-type="1"
								style="margin-left: 1rem">提交</span> <span style="display: block">最长500字,剩余
								<strong style="color: red" id="contextcount">500</strong>字
							</span>
						</p>
					</div>
				</div>
				<div class="row mod-node">
					<div class="col-xs-2">必须修改的节点</div>
					<div class="col-xs-10">
						<p>
							<span>终审节点</span> <input data-node="Process-task2" value=""
								onclick="selector(this,3,'check')" style="padding-left: 10px"
								class="borderInput m-node-operator" type="text"
								placeholder="节点处理人" /> <span style="color: red">*</span>
						</p>
					</div>
				</div>
				<input type="hidden" id="mmodnodes_size" value='1'>
				<div class="row">
					<div class="col-xs-2">当前处理人</div>
					<div class="col-xs-10">
						水表录入审批： <span>水表录入审批(周利斌)</span>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-2">已经处理人</div>
					<div class="col-xs-10">
						<span>周利斌(科荣智慧客服)</span>
					</div>
				</div>
				<div class="row flow-Chart">
					<div class="col-xs-12">
						<span id="workflowsvg" class="icon-check-empty">流程图</span>
					</div>
				</div>
				<div class="row approval-svg approval-pic"
					style="position: relative; text-align: center;">
					<div class="svgTip" style="display: none;"></div>
					<div class="__btn">
						<p class="__p1" step="-1" onselectstart="return false;">+</p>
						<p class="__p2" step="1" onselectstart="return false;">-</p>
					</div>
					<svg id="design" class="design" width="173.33333333333334"
						height="418.6666666666667" viewBox="197.0 41.0 260.0 628.0"
						version="1.1" xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                        <symbol id="startIcon">
                            <path
							d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 15c-3.59 0-7-2.91-7-7s2.91-7 7-7 7 2.91 7 7-2.91 7-7 7zM6 4.5l6 3.5-6 3.5z"></path>
                        </symbol>
                        <symbol id="endIcon">
                            <path
							d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 15c-3.59 0-7-2.91-7-7s2.91-7 7-7 7 2.91 7 7-2.91 7-7 7zM5 5h6v6h-6z"></path>
                        </symbol>
                        <symbol id="draftIcon">
                            <path
							d="M13.5 0h-12c-0.825 0-1.5 0.675-1.5 1.5v13c0 0.825 0.675 1.5 1.5 1.5h12c0.825 0 1.5-0.675 1.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5z
M14 15h-13v-14h13v14zM4 7h7v1h-7zM4 9h7v1h-7zM4 11h7v1h-7zM4 5h7v1h-7z"></path>
                        </symbol>
                        <symbol id="taskIcon">
                            <path
							d="M13.5 0h-12c-0.825 0-1.5 0.675-1.5 1.5v13c0 0.825 0.675 1.5 1.5 1.5h12c0.825 0 1.5-0.675 1.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5z
M14 15h-13v-14h13v14zM4 9h7v1h-7zM4 11h7v1h-7zM5 4.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5zM7.5 6h-2c-0.825 0-1.5 0.45-1.5 1v1h5v-1c0-0.55-0.675-1-1.5-1z"></path>
                        </symbol>
                        <symbol id="childrenIcon">
                            <svg t="1586248589184" class="icon"
							viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="1425"
							data-spm-anchor-id="a313x.7781069.0.i4" width="16" height="16">
                                <path
								d="M571.989333 603.989333H196.010667a35.968 35.968 0 1 0 0 72.021334h375.978666a35.968 35.968 0 1 0 0-72.021334z m123.989334-276.010666v624H72.021333V328.021333h624.042667z m0-71.978667H72.021333C32.213333 256 0 288.213333 0 328.021333v624C0 991.744 32.213333 1024 72.021333 1024h623.957334c39.808 0 72.021333-32.213333 72.021333-72.021333V328.021333C768 288.213333 735.786667 256 695.978667 256z m256-256H359.68a35.968 35.968 0 1 0 0 72.021333h592.341333v595.968a35.968 35.968 0 1 0 71.978667 0V71.978667C1024 32.213333 991.786667 0 951.978667 0z m-128 128H164.053333a35.968 35.968 0 1 0 0 72.021333h660.010667v659.968a35.968 35.968 0 1 0 71.978667 0V200.021333C896 160.213333 863.786667 128 823.978667 128z"
								p-id="1426" fill="#000000"></path>
                            </svg>
                        </symbol>
                        <symbol id="noticeIcon" viewBox="0 0 1000 1000">
                            <path
							d="M924.7,116.7H75.3C39.3,116.7,10,146,10,182V818c0,36.1,29.3,65.3,65.3,65.3h849.3c36.1,0,65.3-29.3,65.3-65.3V182C990,146,960.7,116.7,924.7,116.7z M875.4,171.2L523.1,523.4c-12.8,12.8-33.4,12.8-46.2,0L124.6,171.2H875.4z M935.6,796.2c0,18-14.6,32.7-32.7,32.7H97.1c-18,0-32.7-14.6-32.7-32.7V203.8c0-4.7,1-9.1,2.7-13.1l386.7,386.7c25.5,25.5,66.8,25.5,92.3-0.1l386.6-386.6c1.8,4,2.7,8.4,2.7,13.1V796.2z"></path>
                        </symbol>
                        <symbol id="exclusiveIcon">
                            <path d="M0 8  L8 0  L16 8  L8 16  z"
							stroke="#000" fill-opacity="0" stroke-width="2"></path>
                            <line stroke="#000000" fill-opacity="0"
							x1="6" y1="6" x2="10" y2="10"></line>
                            <line stroke="#000000" fill-opacity="0"
							x1="10" y1="6" x2="6" y2="10"></line>
                        </symbol>
                        <symbol id="parallelIcon">
                            <path d="M0 8  L8 0  L16 8  L8 16  z"
							stroke="#000" fill-opacity="0" stroke-width="2"></path>
                            <line stroke="#000000" fill-opacity="0"
							x1="5" y1="8" x2="11" y2="8"></line>
                            <line stroke="#000000" fill-opacity="0"
							x1="8" y1="5" x2="8" y2="11"></line>
                        </symbol>
                        <symbol id="inclusiveIcon">
                            <path d="M0 8  L8 0  L16 8  L8 16  z"
							stroke="#000" fill-opacity="0" stroke-width="2"></path>
                            <circle stroke="#000000" fill-opacity="0"
							cx="8" cy="8" r="2"></circle>
                        </symbol>
                        <marker id="arrow" viewBox="0 0 20 20" refX="20"
							refY="10" markerUnits="strokeWidth" markerWidth="6"
							markerHeight="10" orient="auto">
                            <path d="M 0 0 L 20 10 L0 20 z" fill="black"
							stroke="black"></path>
                        </marker>
                    </defs>
                    <g transform="matrix(1,0,0,1,217,61)"
							class="selectable" id="Process-start0" name="开始"
							code="Process-start0" type="start">
                        <rect x="1" y="1" rx="30" ry="30" width="200"
							height="60" fill="#fff"></rect>
                        <path stroke-width="1" fill="none"
							d="M0 30L200 30" r="30" id="Process-start0l" stroke="none"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="-4" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-start0l">开始</textPath>
                        </text>
                        <svg y="16" x="16" stroke="none" width="28"
							height="28" viewBox="0 0 16 16">
                            <use
								xmlns:xlink="http://www.w3.org/1999/xlink"
								xlink:href="#startIcon"></use>
                        </svg>
                    </g>
                    <g
							transform="matrix(1,0,0,1,217.00000323355198,182.0000027269125)"
							class="selectable" id="Process-task0" code="register"
							type="draftNode" name="水表录入" operator="" filter_rule=""
							auto_pick_rule="" approval_criteria="" candidate=""
							candidategroup="" notice_way="false,false,false"
							attachment="false" notice_draft_man="0,0,0" form_id="register"
							can_update_nodes="" modnodesnames="" must_update_nodes=""
							mmodnodesnames="" candidate_show="">
                        <rect x="1" y="1" width="200" height="60" rx="4"
							fill="#fff"></rect>
                        <path stroke-width="1" fill="none"
							d="M0 30L200 30" r="30" id="Process-task0l" stroke="none"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="-6" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-task0l">水表录入</textPath>
                        </text>
                        <svg y="16" x="16" stroke="none" width="28"
							height="28" viewBox="0 0 16 16">
                            <use
								xmlns:xlink="http://www.w3.org/1999/xlink"
								xlink:href="#draftIcon"></use>
                        </svg>
                    </g>
                    <g
							transform="matrix(1,0,0,1,217.00000323355198,313.00000466406345)"
							class="selectable" id="Process-task1" code="approval"
							type="approveNode" name="水表录入审批" operator=""
							candidate="1-jixiaofeng,1-lishihao,1-zxy,1-liangguangchun,1-xuhaiyi,1-zhoulibin"
							candidategroup="" communicators="" null_operator_skip="false"
							double_skip="false" circulation_mode="" filter_rule=""
							auto_pick_rule="" approval_criteria=""
							notice_way="true,true,true" attachment="true"
							options="true,true,true,false,false" remisable_nodes=""
							remisable_nodesnames="" jumpernodes="" jumpernodesnames=""
							can_update_nodes="" modnodesnames=""
							must_update_nodes="Process-task2"
							mmodnodesnames="Process-task2终审节点" urge_operator="0,0,0"
							notice_draft_man="0,0,0" auto_skip="0,0,0" form_id="approval"
							candidate_show="(人员)嵇小凤(清溪营业部),(人员)李世豪(清溪营业部),(人员)周新宇(科荣智慧客服),(人员)梁光春(科荣智慧客服),(人员)许海宜(科荣智慧客服),(人员)周利斌">
                        <rect x="1" y="1" width="200" height="60" rx="4"
							fill="#fff"></rect>
                        <path stroke-width="1" fill="none"
							d="M0 30L200 30" r="30" id="Process-task1l" stroke="none"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="-6" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-task1l">水表录入审批</textPath>
                        </text>
                        <svg y="16" x="16" stroke="none" width="28"
							height="28" viewBox="0 0 16 16">
                            <use
								xmlns:xlink="http://www.w3.org/1999/xlink"
								xlink:href="#taskIcon"></use>
                        </svg>
                    </g>
                    <g class="selectable" id="Process-line0" name=""
							type="line" start="Process-start0" end="Process-task0"
							auto_skip="" count="" condition_exps="">
                        <path id="Process-line0l" stroke="#000"
							stroke-width="2" fill-opacity="0"
							marker-end="url(&quot;#arrow&quot;)"
							d="M317.500003233552 121.00000090897083 L317.500003233552 182.00000271201134"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="6" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-line0l"></textPath>
                        </text>
                    </g>
                    <g class="selectable" id="Process-line1" name=""
							type="line" start="Process-task0" end="Process-task1"
							auto_skip="" count="" condition_exps="">
                        <path id="Process-line1l" stroke="#000"
							stroke-width="2" fill-opacity="0"
							marker-end="url(&quot;#arrow&quot;)"
							d="M317.500003233552 242.00000271201134 L317.500003233552 313.00000466406345"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="6" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-line1l"></textPath>
                        </text>
                    </g>
                    <g
							transform="matrix(1,0,0,1,217.00000323355198,447.00000666081905)"
							class="selectable selected" id="Process-task2"
							code="Process-task2" type="approveNode" name="终审节点" operator=""
							candidate="1-zxy,1-zhoulibin" candidategroup="" communicators=""
							null_operator_skip="false" double_skip="false"
							circulation_mode="" filter_rule="" auto_pick_rule=""
							approval_criteria="" notice_way="false,false,false"
							attachment="false" options="true,true,true,false,false"
							remisable_nodes="" remisable_nodesnames="" jumpernodes=""
							jumpernodesnames="" can_update_nodes="" modnodesnames=""
							must_update_nodes="" mmodnodesnames="" urge_operator="0,0,0"
							notice_draft_man="0,0,0" auto_skip="0,0,0" form_id=""
							candidate_show="(人员)周新宇,(人员)周利斌">
                        <rect x="1" y="1" width="200" height="60" rx="4"
							fill="#fff"></rect>
                        <path stroke-width="1" fill="none"
							d="M0 30L200 30" r="30" id="Process-task2l" stroke="none"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="-6" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-task2l">终审节点</textPath>
                        </text>
                        <svg y="16" x="16" stroke="none" width="28"
							height="28" viewBox="0 0 16 16">
                            <use
								xmlns:xlink="http://www.w3.org/1999/xlink"
								xlink:href="#taskIcon"></use>
                        </svg>
                    </g>
                    <g class="selectable" id="Process-line3" name=""
							type="line" start="Process-task1" end="Process-task2"
							auto_skip="" count="" condition_exps="">
                        <path id="Process-line3l" stroke="#000"
							stroke-width="2" fill-opacity="0"
							marker-end="url(&quot;#arrow&quot;)"
							d="M317.500003233552 373.00000466406345 L317.500003233552 447.00000666081905"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="6" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-line3l"></textPath>
                        </text>
                    </g>
                    <g
							transform="matrix(1,0,0,1,217.00000324845314,589.000008776784)"
							class="selectable" id="Process-end0" code="Process-end0"
							name="结束" type="end">
                        <rect x="1" y="1" rx="30" ry="30" width="200"
							height="60" fill="#fff"></rect>
                        <path stroke-width="1" fill="none"
							d="M0 30L200 30" r="30" id="Process-end0l" stroke="none"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="-4" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-end0l">结束</textPath>
                        </text>
                        <svg y="16" x="16" stroke="none" width="28"
							height="28" viewBox="0 0 16 16">
                            <use
								xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#endIcon"></use>
                        </svg>
                    </g>
                    <g class="selectable" id="Process-line4" name=""
							type="line" start="Process-task2" end="Process-end0" auto_skip=""
							count="" condition_exps="">
                        <path id="Process-line4l" stroke="#000"
							stroke-width="2" fill-opacity="0"
							marker-end="url(&quot;#arrow&quot;)"
							d="M317.500003233552 507.00000666081905 L317.500003233552 589.000008776784"></path>
                        <text>
                            <textPath text-anchor="middle"
							baseline-shift="6" startOffset="50%" fill="#000" stroke="none"
							xlink:href="#Process-line4l"></textPath>
                        </text>
                    </g>
                </svg>
				</div>
				<div class="row footerBtn"></div>
				<input type="hidden" id="activityId" value="Process-task1">
				<input type="hidden" id="setCode" value="C021006TS"> <input
					type="hidden" id="processCode" value="ms_in_plan"> <input
					type="hidden" id="fileId" value="">

			</div>
		</div>
	</div>
	<script type="text/javascript">
		if($("input[name = 'operation']").size()>0){
			$("input[name = 'operation']").get(0).checked=true;
		}
		if($("input[name = 'operation'][value = '128']").size()>0){
			$("input[name = 'operation'][value = '128']").get(0).checked=true;
		}
		$(".approval-content > ._showbutton").click(function(){
			$(this).toggleClass("_hide").toggleClass("icon-minus-circle").toggleClass("icon-plus-circle");
        });
        var oldw =null;
        var oldh =null;
        var zoomStep = [4,3,2,1.5,1.2,1,0.9,0.75,0.5,0.3];
        var pos = 5;
        $(".__p1,.__p2").click(function(event){
            if(!oldw){
                oldw = $("#design").width();
                oldh = $("#design").height();
            }
            pos += Number(event.target.attributes.step.value);
            if(pos < 0 )pos =0;
            if(pos > zoomStep.length-1 )pos =zoomStep.length-1;
            $("#design").css("width",oldw*zoomStep[pos]);
            $("#design").css("height",oldh*zoomStep[pos]);
        });
		
			
		var historyData = {};
		var historyItem = {};
			historyItem = {};
			historyItem.time = "2021-05-14 11:04:56";
			historyItem.asignee = "周利斌";
			historyItem.memo = "中心";
			if(historyData["Process-task0"]){
				historyData["Process-task0"].push(historyItem);
			}else{
				historyData["Process-task0"]=[historyItem];
			}
			historyItem = {};
			historyItem.time = "2021-05-14 11:08:06";
			historyItem.asignee = "周利斌";
			historyItem.memo = "测试。。。。";
			if(historyData["Process-task1"]){
				historyData["Process-task1"].push(historyItem);
			}else{
				historyData["Process-task1"]=[historyItem];
			}
			historyItem = {};
			historyItem.time = "2021-05-14 11:46:07";
			historyItem.asignee = "周利斌";
			historyItem.memo = "测试";
			if(historyData["Process-task2"]){
				historyData["Process-task2"].push(historyItem);
			}else{
				historyData["Process-task2"]=[historyItem];
			}
       
		function showNodeInfo(id){
				var historyItems = historyData[id];
				if(historyItems){
					for(var i=0;i
    <historyItems.length;i++){
						var html='
        <div class="row-tip">'
									+'
            <div>'
										+'
                <label class="tipName">操作时间:</label>'
										+'
                <span class="tipValue">'+historyItems[i].time+'</span>'
									+'
            </div>'
									+'
            <div>'
										+'
                <label class="tipName">操作者:</label>'
										+'
                <span class="tipValue">'+historyItems[i].asignee+'</span>'
									+'
            </div>'
									+'
            <div>'
										+'
                <label class="tipName">处理意见:</label>'
										+'
                <span class="tipValue">'+historyItems[i].memo+'</span>'
									+'
            </div>'
								+'
        </div>';
						$(".svgTip").html(html);
					}
				$(".svgTip").show();
			}
		}

        $("#design > g[type != 'line'][type != 'start'][type != 'end']").mouseover(function(evt){
			var event = evt || window.event;
			var offset = $("#design").offset();
			$(".svgTip").css({"left":event.clientX+20,"top":event.clientY+10-offset.top});
			showNodeInfo(this.id)
		});
		$("#design g[type != 'line'],#design g[type != 'start'],#design g[type != 'end']").mouseout(function(){
			$(".svgTip").hide();
		});
			var node = $("#Process-start0,#Process-start0 text textPath");
	        node.attr('fill','#333333');
			var rect =$("#Process-start0 rect");
    	    rect.attr('stroke','#b2b2b2');
        	rect.attr('fill','#00a4ff1a');
        	var syb = $("#Process-start0 svg");
        	syb.attr('fill','#00a4ff');
		 /*已经办理过的任务节点*/
			var node = $("#Process-task0,#Process-task0 text textPath");
			node.attr('fill','#333333');
			var rect =$("#Process-task0 rect");
			rect.attr('stroke','#b2b2b2');
        	rect.attr('fill','#00a4ff1a');
        	var syb = $("#Process-task0 svg");
	        syb.attr('fill','#00a4ff');
			$("#design").append($("#Process-task0"));
			var node = $("#Process-task1,#Process-task1 text textPath");
			node.attr('fill','#333333');
			var rect =$("#Process-task1 rect");
			rect.attr('stroke','#b2b2b2');
        	rect.attr('fill','#00a4ff1a');
        	var syb = $("#Process-task1 svg");
	        syb.attr('fill','#00a4ff');
			$("#design").append($("#Process-task1"));
			var node = $("#Process-task2,#Process-task2 text textPath");
			node.attr('fill','#333333');
			var rect =$("#Process-task2 rect");
			rect.attr('stroke','#b2b2b2');
        	rect.attr('fill','#00a4ff1a');
        	var syb = $("#Process-task2 svg");
	        syb.attr('fill','#00a4ff');
			$("#design").append($("#Process-task2"));
		var node =$("#activityId").val();
		/*当前办理任务节点*/
		if(node !=null && node !==''){
			var arr = node.split(",");
        	$.each(arr, function(idx,item) {
        		var rect = $("#"+item+" rect");
    			rect.attr('stroke','#1f92fb');
                rect.attr('fill','#1f92fb');
    			var textSpan = $("#"+item+",#"+item+" text textPath");
                textSpan.attr('fill','white');
				var syb = $("#"+item +" svg");
                syb.attr('fill','white');
        	});
		}
		
		$(".icon-check-empty").click(function(){
            $(this).toggleClass("icon-check");
        });
        $("#workflowsvg").click(function(){
	        $(".approval-svg").fadeToggle();
	    });
        $(".approval-history").on("click",".icon-check-empty",function(){
            $(".approval-table").fadeToggle();
        });
      
        function submitCheck(data){
    		try{
    			var operation = $("input[name = 'operation']:checked").val();
    			if(operation == null || operation == ""){
    				operation =32;
    			}
    			if(operation == 1){
    				var nodekey = $("#reback option:selected").val();
    				if(nodekey == "-1"){ /*驳回*/
    					throw "请选择要驳回的节点";
    				};
    				data.rejectNodeCode = nodekey;
    			}else if(operation == 2){/*转办*/
    				var users = $("#reset").data("code");
    				if(users == null || users == ""){
    					 throw "请输入转办人员";
    				};
    				data.relatedUser = users[0].code;
    			}else if(operation == 4){/*沟通*/
    				var users = $(".communicate").data("code");
    				if(users == null || users == ""){
    					throw "请输入沟通人员";
    				};
    				data.relatedUser = $(users).map(function(a){
    					return this.code;
    			    }).get().join(",");
    			}else if(operation == 128){
    			 	var users= $(".icon-check[name=cancelCommun]").map(function(a){
    					return $(this).data("code");
    				}).get().join(",");
    				if(users == null || users == ""){
    					throw "请选择取消沟通人员";
    				};
    				data.relatedUser = users;
    			}
    			var context = $("#context").val();
    			if((operation ==4 || operation==1 || operation == 64 ) && (context == null ||context =='')){
    				throw "请输入处理意见";
    			}
    			var mnodeOperator = nodeOper(".m-node-operator");
				var size = $("#mmodnodes_size").val();/*必须修改节点的个数*/
				if(operation == 32 && size * 1 > 0 && mnodeOperator.length != size){
					throw "请输入必须修改节点的办理人";
				}
    			data.comment = context;
    			data.operation = operation;
    			data.otherNodeCandidates = mnodeOperator;
    			return data;
    		}catch (err) {
    			throw err;
    		}
    	}	
		$("input[name = 'operation']").click(function(){
			var val = $(this).val();
			$(".reject-box,.turn-box,.communication-box,.mod-node,.add_communication-box").hide();
			if(val == null || val == ""){
				return ;
			}
			if(val == 1){/*驳回*/
				$(".reject-box,#remark").show();
				return ;
			}
			if(val == 2){/*转办*/
				$(".turn-box").show();
				return ;
			}
			if(val == 4){/*沟通*/
				$(".communication-box,#remark").show();
				return ;
			}
			if(val == 32){/*通过*/
				$(".mod-node,#remark").show();
				return ;
			}
			if(val == 64){/*回复沟通*/
				$("#remark").show();
				return ;
			}
			if(val == 128){/*取消沟通*/
				$(".add_communication-box,#remark").show();
			} 
		});
		
		function getSubmitData(){
			var data = {};
			data= submitCheck(data);
			data.taskId ="196812";
			data.setCode = "C021006TS";
			data.processCode = "ms_in_plan";
			return data;
		}
		
	   $(".submit-opinion").on("click",function(){
			try{
				data= getSubmitData();
			}catch (err) {
				var dlg = dialog({
					title : "操作提示",
					content : err
				});
				dlg.showModal();
				return;
			}
			approve(data);
		});
		
		function nodeOper(selector){
			var arr = [];
			$(selector).each(function(index){
				var data = {};
				var k = $(this).data("node");
				var code = $(this).data("code");
				if(code == null || code =='') return true;
				data[k] = $(code).map(function(a){
					return this.type+"-"+this.code;
				}).get().join(",");
				arr.push(data);
			});
			return arr;
		};
		
		function selector(obj,typeNum,typeCheck){
	    	$(obj).staffSelector({data:$(obj).data("code"),type:typeNum,checkType:typeCheck});
		};
        document.getElementById("context").oninput=function(){
            document.getElementById("contextcount").innerText = 500 - document.getElementById("context").value.length;
        }
    </script>
	<style type="text/css">
.selectable {
	stroke: #b2b2b2 !important;
}

.approval-content>._hide+.approval-list {
	display: none;
}

text {
	font-size: 1.5rem
}

.approval-pic, .approval-table tbody {
	background-color: white
}

.approval-pic {
	background: repeat
		url('');
}

#arrow path {
	fill: #00a4ff
}

.approval-list .approval-table table tr:last-child {
	border-bottom: 0;
}

div.__btn {
	text-align: center;
	width: 30px;
	position: absolute;
	right: 15px;
	top: 15px;
	background: #00a4ff !important;
	color: #fff;
	border-radius: 2px;
	font-size: 30px;
	border: 1px solid #126490;
	padding: 0 2px !important;
}

.__p1 {
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	height: 40px;
	cursor: pointer;
}

.__p2 {
	font-size: 42px;
	cursor: pointer;
	height: 40px;
}

.svgTip {
	position: absolute;
	min-width: 20em;
	left: 15px;
	top: 15px;
	text-align: left;
	padding: 10px 15px !important;
	border-radius: 3px;
	border: 1px solid #e5e5e5;
	display: inline-block;
	background: rgba(251, 231, 126, 0.8) !important;
}

.svgTip .row-tip {
	padding: 10px 0;
	border-bottom: 1px dashed #ababab;
}

.svgTip .row-tip:first-child {
	padding-top: 0;
}

.svgTip .row-tip:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.svgTip .row-tip>div {
	padding: 5px 0;
	width: 100%;
	max-width: 260px;
	line-height: initial;
}

.svgTip .row-tip>div .tipName, .svgTip .row-tip>div .tipValue {
	text-align: left;
	display: inline-block;
}

.svgTip .row-tip>div .tipName {
	vertical-align: top;
	width: 4.5em;
	text-align-last: justify;
	text-align: justify;
}

.svgTip .row-tip>div .tipValue {
	padding-left: 8px;
	width: calc(100% - 5em);
}
</style>

</body>
</html>
